<template>
	<view class="packMsgBox">
		<view>
			<view class="packImg">
				<view>
					<image :src="contractStore.contractDetail?.doctorId?.avatar"></image>
				</view>

				<view class="nurseText">
					<view>{{ contractStore.contractDetail?.doctorId?.name }}</view>
					<!-- <view class="duty">??护士??</view> -->
				</view>
			</view>
			<view class="center-contair">
				<view class="detailBox">
					<view class="home-people" @click="openPeople">
						<text>申请人</text>

						<text>
							{{ contractStore.userInfo?.name }}
						</text>
						<!-- </template> -->
						<view>
							<up-popup :show="showPeople" @open="openPeople" ref="popup" type="bottom" :safe-area="false"
								border-radius="16px">
								<view class="pop-content">
									请选择签约人
								</view>

								<view class="pop-gender"
									@click="(peopleValue = contractStore.userInfo?.name) && (showPeople = false)">
									{{ contractStore.userInfo?.name }}
								</view>
								<view class="pop-bottom" @click="showPeople = false">
									取消
								</view>
							</up-popup>
						</view>

					</view>
					<image
						src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
					</image>
				</view>
				<view class="detailBox">
					<view class="home-people">
						<text>服务包</text>
						<text>{{ contractStore.contractDetail?.servicePackId?.name }}</text>
					</view>

				</view>
				<view class="detailBox">
					<view class="home-people" @click="open">
						<text>服务项目</text>
						<template v-if="!serviceValue">
							<text style="font-size: 14px;color: #a1a1a1;">
								请选择服务项目
							</text>
						</template>
						<template v-else>
							<text>
								{{ serviceValue }}
							</text>
						</template>
						<view>
							<up-popup :show="showService" @open="open" ref="popup" type="bottom" :safe-area="false"
								border-radius="16px">
								<view class="pop-content">
									请选择服务项目
								</view>
								<view class="pop-gender"
									v-for="item in contractStore.contractDetail?.servicePackId?.serviceItemIds"
									:key="item._id"
									@click="(serviceValue = item.name) && (serviceProId = item._id) && (showService = false)">
									{{ item.name }}
									<text style="color: #fa746b;margin-left: 10rpx;"> {{ item.type }}</text>
								</view>
								<view class="pop-bottom" @click="showService = false">
									取消
								</view>
							</up-popup>
						</view>
					</view>
					<image
						src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
					</image>
				</view>
				<view class="detailBox">
					<view class="home-people" @click="openAddress">
						<text>服务地点</text>
						<!-- <text>请选择服务地点</text> -->

						<template v-if="!addressValue">
							<text style="font-size: 14px;color: #a1a1a1;">
								请选择服务地点
							</text>
						</template>
						<template v-else>
							<text>
								{{ addressValue }}
							</text>
						</template>
						<view>
							<up-popup :show="showAddress" @open="openAddress" ref="popup" type="bottom"
								:safe-area="false" border-radius="16px">
								<view class="pop-content">
									请选择服务地点
								</view>
								<view class="pop-gender"
									@click="(addressValue = contractStore.contractDetail?.organizationId?.address) && (showAddress = false)">
									{{ contractStore.contractDetail?.organizationId?.address }}
								</view>
								<view class="pop-bottom" @click="showAddress = false">
									取消
								</view>
							</up-popup>
						</view>
					</view>
					<image
						src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
					</image>
				</view>
				<view class="detailBox">
					<view class="home-people" @click="showPicker = true">
						<text>服务时间</text>
						<text v-if="!dateLabel" style="font-size: 14px;color: #a1a1a1;">请选择服务时间</text>
						<text v-else style="font-size: 14px;color: #333;">{{ dateLabel }}</text>
						<!-- uview-plus 时间选择器 -->
						<u-datetime-picker :show="showPicker" v-model="current" mode="datetime" :minDate="minDate"
							:maxDate="maxDate" @confirm="onConfirm" @cancel="showPicker = false"></u-datetime-picker>
						<!-- </view> -->
					</view>
					<image
						src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
					</image>
				</view>

				<view>
					<view class="detailBox">
						<view class="home-people" style="display: flex;">
							<text>备注</text>
							<!-- <input type="text"  class="textBox" /> -->
							<textarea class="textBox" placeholder="请填写备注" v-model="masker"></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="commitBtn">

			<button @click="accService()">提交申请</button>
		</view>
	</view>
</template>

<script setup>
import {
	computed,
	ref,
	watch
} from 'vue';
import {
	useContractStore
} from '../../store/contract';
import {
	addServiceApi
} from '../../api/service-projects';

const contractStore = useContractStore();
// 备注
const masker = ref('')

const serviceData = computed(() => ({
	residentId: contractStore.userInfo?._id,
	organizationId: contractStore.contractDetail?.organizationId?._id,
	teamId: contractStore.contractDetail?.teamId?._id,
	doctorId: contractStore.contractDetail?.doctorId?._id,
	servicePackId: contractStore.contractDetail?.servicePackId?._id,
	serviceItemId: serviceProId.value,
	place: addressValue.value,
	time: dateLabel.value,
	remark: masker.value
}))

// 保存服务详情到本地存储
// uni.setStorageSync('serviceDetail', serviceData.value);
// 
// uni.navigateTo({ url: '/homepackge/pages/success/success' });

// 新增服务
const accService = async () => {
	// 验证必填字段
	if (!serviceValue.value) {
		uni.showToast({
			title: '请选择服务项目',
			icon: 'none'
		})
		return
	}

	if (!addressValue.value) {
		uni.showToast({
			title: '请选择服务地点',
			icon: 'none'
		})
		return
	}

	if (!dateLabel.value) {
		uni.showToast({
			title: '请选择服务时间',
			icon: 'none'
		})
		return
	}

	const res = await addServiceApi({
		...serviceData.value
	})
	if (res.code == 200) {
		// 保存服务详情到本地存储，供服务详情页面使用
		const serviceDetail = {
			serviceId: res.data._id || Date.now().toString(), // 服务单号
			applicant: contractStore.userInfo?.name,
			doctorName: contractStore.contractDetail?.doctorId?.name,
			doctorAvatar: contractStore.contractDetail?.doctorId?.avatar,
			doctorTitle: contractStore.contractDetail?.doctorId?.title || '全科医生',
			organization: contractStore.contractDetail?.organizationId?.name,
			team: contractStore.contractDetail?.teamId?.name,
			servicePackage: contractStore.contractDetail?.servicePackId?.name,
			serviceItem: serviceValue.value,
			servicePlace: addressValue.value,
			serviceTime: dateLabel.value,
			remark: masker.value || '无',
			status: '医生审核中',
			submitTime: new Date().toLocaleString('zh-CN')
		}

		uni.setStorageSync('currentServiceDetail', serviceDetail)

		uni.redirectTo({
			url: `/homepackge/pages/success/success?title=${encodeURIComponent('提交成功')}
				&description=${encodeURIComponent('您的申请已提交，正在等待医生审核')}
				&primaryText=${encodeURIComponent('查看预约详情')}
				&secondaryText=${encodeURIComponent('返回首页')}
				&primaryUrl=${encodeURIComponent(`/homepackge/pages/service-detail/service-detail`)}`
		})
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		})
	}
}











// 提交申请
const commitWay = () => {

	// uni.redirectTo({
	// 	url: `/homepackge/pages/success/success?title=${encodeURIComponent('提交成功')}&description=${encodeURIComponent('您的申请已提交，正在等待医生审核')}&primaryText=${encodeURIComponent('查看预约详情')}&secondaryText=${encodeURIComponent('返回首页')}&primaryUrl=${encodeURIComponent(`/homepackge/pages/service-detail/service-detail`)}`
	// })
}



// 是否显示弹窗
const showPicker = ref(false)

// 当前值（时间戳）
const current = ref(Date.now())

// 范围：2014-07-07 13:06  ~  2020-01-01 07:00
const minDate = new Date('2014-07-07 13:06').getTime()
const maxDate = new Date('2025-12-07 15:00').getTime()

// 最终展示文本
const dateLabel = ref('')

// 确认回调：格式化为 yyyy-mm-dd hh:mm
function onConfirm(e) {
	const d = new Date(e.value)
	const Y = d.getFullYear()
	const M = String(d.getMonth() + 1).padStart(2, '0')
	const D = String(d.getDate()).padStart(2, '0')
	const h = String(d.getHours()).padStart(2, '0')
	const m = String(d.getMinutes()).padStart(2, '0')
	dateLabel.value = `${Y}-${M}-${D} ${h}:${m}`
	showPicker.value = false
}

// 自定义格式化（可选，这里演示保留默认即可）
// function formatter(type, value) {
// 	type: year / month / day / hour / minute
// 	return value
// }

// 服务地点底部弹窗
const showAddress = ref(false);
// 性别
const addressData = ref([{
	name: '11',
	choose: 1
},
{
	name: '22',
	choose: 0
}
])

const addressValue = ref('')

// 服务地点打开方法
const openAddress = () => {
	showAddress.value = true;
}



// 服务项目底部弹窗
const showService = ref(false);
// 性别
const genderData = ref([{
	name: '男',
	choose: 1
},
{
	name: '女',
	choose: 0
}
])

const serviceValue = ref('')
// 保存服务项目id
const serviceProId = ref('')



const genderId = ref()
// 服务项目打开方法
const open = () => {
	showService.value = true;
}




// 申请人底部弹窗
const showPeople = ref(false);
// 性别
const peopleData = ref([{
	name: '555',
	choose: 1
},
{
	name: '666',
	choose: 0
}
])

const peopleValue = ref('')
// const genderId = ref()
// 申请人打开方法
const openPeople = () => {
	showPeople.value = true;
}
</script>

<style scoped lang="scss">
.commitBtn {
	height: 160rpx;
	border-top: 1px solid #eee;
	display: flex;
	align-items: center;
	padding: 0 40rpx;

	button {
		width: 100%;
		height: 88rpx;
		background-color: #2984f8;
		font-size: 16px;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
		margin: 20rpx 0;
	}
}

.page {
	padding: 40rpx;
}

.textBox {
	// width: 100%;
	height: 216rpx;
	background: #eee;
	display: inline-block;
	margin: 30rpx 0;
	border-radius: 16rpx;
	// margin-left: 150rpx;
	width: 90%;

	// vertical-align: top;

}

.pop-bottom {
	height: 120rpx;
	color: #999;
	font-size: 16px;
	border-top: 10rpx solid #eee;
	// line-height: 174rpx;
	text-align: center;
	padding-top: 60rpx;
	font-weight: 510;
}

.pop-gender {
	height: 112rpx;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	color: #1877f2;
	line-height: 112rpx;
	text-align: center;
	font-weight: 510;
}

.pop-content {
	height: 88rpx;
	border-bottom: 1px solid #eee;
	color: #999;
	font-size: 12px;
	line-height: 88rpx;
	text-align: center;
}

.home-people {
	width: 100%;

	text {
		color: #333;
		font-size: 14px;
		line-height: 88rpx;
	}

	text:first-child {
		width: 180rpx;
		color: #999;
		// margin-right:10rpx;
		display: inline-block;
	}
}

.detailBox {
	// padding: 0 40rpx;
	// height: 88rpx;
	display: flex;
	justify-content: space-between;
	position: relative;
	border-bottom: 1px solid #eee;

	image {
		width: 14rpx;
		height: 24rpx;
		margin-top: 35rpx;
	}

}

.nurseText {
	margin-top: 50rpx;
	font-size: 18px;
	color: #333;

	view {
		margin-top: 20rpx;
	}


	.duty {
		color: #999;
		font-size: 14px;
		margin-top: 20rpx;
	}
}

.packMsgBox {
	height: 188rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	// margin: 0 40rpx;
	// padding: 0 40rpx;
}

.packImg {
	display: flex;
	background-color: #f0f8ff;
	padding: 0 40rpx;

	image {
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		margin-right: 40rpx;
		width: 128rpx;
		height: 128rpx;
	}

}

.center-contair {
	padding: 0 40rpx;
}
</style>